<!-- 上传进度展示-component -->
<template>
  <div v-if="fileStore.curUploadTasks.size">
    <ProgressBar
      mode="indeterminate"
      style="height: 6px"
      :pt="{ value: { class: 'bg-theme-color' } }"
    ></ProgressBar>
    <div class="text-center">
      <i class="pi pi-spin pi-spinner text-active text-xs font-bold"></i>
      <b class="text-active text-xs font-bold">{{
        `${i18nStore.translate('uploading')}`
      }}</b>
    </div>
    <div class="text-center">
      <b class="text-active text-xs font-bold"
        >{{ `${i18nStore.translate('progress')}:${fileStore.schedule}%` }}
        <br />
        {{
          `${i18nStore.translate('uploading_remaining')}${
            fileStore.curUploadTasks.size
          }`
        }}
      </b>
    </div>
  </div>
</template>

<script setup>
import { useFileStore, useI18nStore } from '@/stores';

const fileStore = useFileStore();
const i18nStore = useI18nStore();
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
